<template>
    <el-form-item label-width="0">
        <el-divider class="custom-divider-margin-top">分页参数配置</el-divider>
        <div class="pageAttr-editor">
            <div>
                <span>页数：</span>
                <el-cascader
                        v-model="optionModels.pageAttr.size"
                        :options="dataList">
                </el-cascader>
            </div>
            <div>
                <span>页码：</span>
                <el-cascader
                        v-model="optionModels.pageAttr.page"
                        :options="dataList">
                </el-cascader>
            </div>
            <div>
                <span>总数：</span>
                <el-cascader
                        v-model="optionModels.pageAttr.total"
                        :options="dataList">
                </el-cascader>
            </div>

        </div>
    </el-form-item>
</template>

<script>
import SvgIcon from "@/components/svg-icon/index.vue";
import i18n from "@/utils/i18n";

export default {
    name: "pageAttr-editor",
    components: {SvgIcon},
    mixins: [i18n],
    props: {
        designer: Object,
        selectedWidget: Object,
        optionModel: Object,
    },
    computed: {
        optionModels() {
            return this.selectedWidget.options
        },
        dataList() {
            let dataObj = [];
            let {pageScript: {data}} = this.designer;
            if (data && data.length > 0) {
                let d = JSON.parse(data);
                let loopKey = (o, p) => {
                    let arrKey = Object.keys(o)
                    for (let i = 0; i < arrKey.length; i++) {
                        let item = arrKey[i];
                        if (p) {
                            let obj = {};
                            let findObj = (o_) => {
                                for (let j = 0; j < o_.length; j++) {
                                    if (o_[j].label === p) {
                                        obj = o_[j];
                                    } else {
                                        if (o_[j].children && o_[j].children.length > 0) {
                                            findObj(o_[j].children)
                                        }
                                    }
                                }
                            }
                            findObj(dataObj)

                            if (JSON.stringify(obj) !== "{}") {
                                if (!obj.children) {
                                    Object.assign(obj, {children: []})
                                }
                                obj.children.push({
                                    label: item,
                                    value: item,
                                    bind: obj.bind + '.' + item,
                                })
                            }
                        } else {
                            dataObj.push({label: item, value: item, bind: item})
                        }

                        if (typeof o[item] === "object") {
                            loopKey(o[item], item)
                        }
                    }
                }
                loopKey(d)
            }
            return dataObj;
        }
    },
    data() {
        return {}
    },
    methods: {}
}
</script>

<style scoped lang="scss">
.pageAttr-editor {
  > div {
    margin-bottom: 5px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: nowrap;

    > span {
      display: inline-block;
      width: 120px;
      padding-right: 12px;
      color: #606266;
      font-size: 13px;
    }
  }
}
</style>
